<template>
    <div id="app">
      <transition name="fade">
      <keep-alive :include="cacheList" :max="5">
        <router-view></router-view>
      </keep-alive>
      </transition>
    </div>
</template>

<script>
export default {
    name: 'App',
    components: {},
  data(){
      return{
        cacheList:[]
      }
  }

};
</script>

<style lang="scss">
/* transition css  name=fade*/
.fade-enter-active {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: 1;
}

.fade-enter,
.fade-leave-active {
  opacity: 0;
}
/*transition css  name=fade*/
/*transition css  name=slide*/
.slide-right-enter-active {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  opacity: 1;
  position: fixed;
  width: 100vw;
}

.slide-right-enter,
.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate3d(50%, 0, 0);
  transform: translate3d(50%, 0, 0);
}

.slide-right-leave-active {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slide-left-enter-active {
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  width: 100vw;
}

.slide-left-enter,
.slide-left-leave-active {
  opacity: 0;
  -webkit-transform: translate3d(-50%, 0, 0);
  transform: translate3d(-50%, 0, 0);
}

.slide-left-active {
  opacity: 0;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
</style>
